<template>
  <div >
    <div class="listinfo">
      <div v-for="item in fansList" :key="item.name" class="listitem">
        <img :src="item.photo">
        <p>{{item.name}}</p>      
        <el-button type="primary" :plain="isplain" @click="attention(item)">+关注</el-button>
      </div>
    </div> 
      <el-pagination
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-size="per_page"
      layout="total, prev, pager, next, jumper"
      :total="total_count">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name:'fans-photo',
    data () {
      return {
        page:1,
        per_page:21,
        fansList:[],
        isplain:true,
        total_count:0
      }
    },
    created () {
      this.getFansinfo()
    },
    methods: {
      async getFansinfo(){
        let res =await this.$http({
          url:'/mp/v1_0/followers',
          params:{     
              page:this.page,
              per_page:this.per_page        
          }
        })
       this.fansList = res.data.data.results
       this.total_count = res.data.data.total_count
       console.log(res)
      },
      handleCurrentChange(val){
        this.page = val
        this.getFansinfo()
      },
      //关注
      attention(item){
         this.$message({
          message: '关注成功',
          type: 'success'
        });
      }
    }
    
  }
</script>

<style lang="less" scoped>
 .listinfo{
   width: 1500px;
   display: flex;
   flex-wrap: wrap;
   margin-left: 20px;
   justify-items: center;
   
   .listitem{
     border: 1px solid rgba(0,0,0,.3);
     margin: 30px;
     border-radius: 10px;
     width: 130px;
     height: 200px;
     text-align: center;
     img{
       display: block;
       width: 90px;
       height: 90px;
       border-radius: 50%;
       margin: 10px 0 0 20px;
     }
     p{
       margin-top: 20px;
      
     }
     .el-button{
      margin-top: 10px;
     }
   }
 }
 .el-pagination{
   margin: 10px 0 0 800px;
 }
</style>